<template>
    <div class="myinput">
        <slot name="title">
            <h2 class="tip">{{name}}</h2>
        </slot>
        <div class="input-list">

            <div class="input-item" v-for="(item,index) in num" :key="index">
                <el-input @blur="blurItem"
                          minlength="1"
                          maxlength="30"
                          @focus="focusItem(index)"
                          size="small"
                          placeholder="用量"
                          class="input-two"
                          v-model="materials[index].weight">
                    <el-input @blur="blurItem" @focus="focusItem(index)"
                              slot="prepend"
                              maxlength="30"
                              minlength="1"
                              placeholder="食材名"
                              v-model="materials[index].name"/>
                    <el-button @click="deleteItem(index)" slot="append" icon="el-icon-close" class="close"/>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'MyInput',
        data() {
            return {
                num: 1,
                input3: "",
                materials: [],
            }
        },
        props: {
            name: {
                type: String,
                default: ""
            },
            init: {
                type: Array,
            }
        },
        watch: {
            init(data) {
                this.num = data.length
                this.materials.splice(0, this.materials.length)
                this.materials.push(...data)
            }
        },
        methods: {
            //清除空数据
            clearn() {
                let arr_index = []
                for (let i = 0; i < this.materials.length; i++) {
                    let m = this.materials[i]
                    if (m.name.trim() === '' && m.weight.trim() === '') {
                        arr_index.push(i)
                    }
                }
                //删除数据
                arr_index.forEach(i => {
                    this.materials.splice(i, 1)
                })
                //因为遍历的问题，需要留一个空元素
                this.materials.push({
                    name: "",
                    weight: ""
                })
            },
            //失去焦点的时候发送事件
            blurItem() {
                this.clearn()
                this.$emit("changeMaterials", this.materials)
            },
            //聚焦的时候
            focusItem(index) {
                if (this.materials.length > 20) {
                    this.msgWarn("最大可设置" + 20 + "个" + this.name)
                    return
                }
                if (index + 1 === this.num) {
                    this.num++
                }
                /**
                 * 如果当前聚焦的是最后一个,则需要追加一个
                 */
                this.materials.push({
                    name: "",
                    weight: ""
                })
            },
            deleteItem(index) {
                if (this.num === 1) {
                    return
                }
                this.num--
                this.materials.splice(index, 1)
            }
        },
        created() {
            this.materials.push({
                name: "",
                weight: ""
            })
        },
        components: {}
    }
</script>

<style scoped lang='less'>
    .myinput {
        margin-bottom: 20px;

        .tip {
            font-size: 16px;
            font-weight: 100;
            color: #606266;
            margin-bottom: 20px;
        }

        .input-list {
            .input-item {
                margin-bottom: 10px;
            }
        }
    }

</style>
<style lang="less">
    .input-list {

        .input-item {
            margin-bottom: 10px;

            .input-two {
                width: 400px;
            }

            .el-input-group__prepend {
                padding: 0;
                width: 200px;
            }
        }

    }

</style>
